import useKeyPress from 'ahooks/es/useKeyPress'
import s from './ToolButton.module.less'
import classNames from 'classnames'

function getSwitchStyle(switchValue?: 0 | 1) {
  if (switchValue === 0) {
    return s.switchOff
  } else if (switchValue === 1) {
    return s.switchOn
  }
  return undefined
}

export function ToolButton(props: {
  shortCut: string | string[]
  onEmit(): void
  label: string
  switch?: 0 | 1
}) {
  useKeyPress(
    props.shortCut,
    (ev) => {
      if (ev.target instanceof HTMLInputElement) return
      ev.preventDefault()
      props.onEmit()
    },
    { exactMatch: true }
  )
  return (
    <button
      className={classNames(getSwitchStyle(props.switch), s.toolButton)}
      onClick={props.onEmit}
    >
      {props.label}
    </button>
  )
}
